<template>
  <div>
    <!--查询条件区域-->
    <div class="table-page-search-wrapper">
      <p-form layout="inline" @keyup.enter.native="searchQuery">
        <p-row :gutter="24">
          <p-col :xl="6" :lg="8">
            <p-form-item label="物料编码">
              <p-input placeholder="请输入物料编码" v-model.trim="queryParam.mcode"></p-input>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-form-item label="物料名称">
              <p-input placeholder="请输入物料名称" v-model.trim="queryParam.mname"></p-input>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-form-item label="物料描述">
              <p-input placeholder="请输入物料描述" v-model.trim="queryParam.mexplain"></p-input>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-button type="primary" @click="searchQuery" icon="search">查询</p-button>
            <p-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</p-button>
          </p-col>
        </p-row>
      </p-form>
    </div>
    <!--工序BOM表格-->
    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="mcode"
      :columns="columns"
      :dataSource="options"
      :pagination="false">
    </p-table>
  </div>
</template>

<script>
// import mixins from './mixins'
import { postAction } from '@/api/manage'
import _ from "lodash";
export default {
  // mixins: [mixins],
  props: {
    options: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      queryParam: {
        mcode: '',
        mname: '',
        mexplain: ''
      },
      //列定义
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key:'rowIndex',
          width: 60,
          align: 'center',
          customRender(t,r,index) {
            return index + 1;
          }
        },
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'mcode',
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'mname',
        },
        {
          title: '物料描述',
          align: 'center',
          dataIndex: 'mexplain'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'stationsRequired',
        }
      ],
      // options: [],
    }
  },
  mounted(){
    this.optionsCopy = _.cloneDeep(this.options);
  },
  methods: {
    searchQuery() {
     this.options = this.optionsCopy.filter( el =>{
        const mcode = this.queryParam.mcode || el.mcode || '';
        const mname = this.queryParam.mname || el.mname || '';
        const mexplain = this.queryParam.mexplain || el.mexplain || '';
        return (el.mcode || '').includes(mcode) && (el.mname || '').includes(mname) && (el.mexplain || '').includes(mexplain);
      });
    },
    searchReset() {
      this.queryParam.mcode = ''
      this.queryParam.mname = ''
      this.queryParam.mexplain = ''
      this.options = this.optionsCopy
    },
    /* loadData(params) {
      postAction('/mes-craft/craft/mesPeProcessRoute/getBomInfoByCode', params).then((res) => {
        if (res.success) {
          this.dataSource = res.data
          this.options = this.dataSource
        }
        if (res.code === 510) {
          this.$message.warning(res.msg)
        }
      })
    }, */
  }
}
</script>
